import React from 'react';
import { Descendant } from 'slate';

import { HeadingElementType, ElementType, ParagraphElementType } from '@/core';

import { PickSome } from './interface';

type DropdownValue = {
  name: string;
  value?: any;
  icon?: IconsType;
};

export type DropdownData = Record<string, DropdownValue>;

export const fontFamilyDropdownData: DropdownData = {
  songti: {
    name: '宋体',
    value: 'SimSun, STSong, sans-serif',
  },
  heiti: {
    name: '黑体',
    value: 'SimHei, STHeiti, sans-serif',
  },
  'Source Code Pro': {
    name: 'Source Code Pro',
    value: "'Source Code Pro', sans-serif",
  },
};

export const fontSizeDropdownData: DropdownData = new Array(20)
  .fill(9)
  .map((_, index) => 9 + index * 2)
  .reduce((prev: DropdownData, cur) => {
    prev[cur] = {
      name: cur + '',
      value: cur + 'px',
    };
    return prev;
  }, {});

type HeadingDropdownData = Record<HeadingElementType | ParagraphElementType, DropdownValue>;

export const headingDropdownData: HeadingDropdownData = {
  paragraph: {
    name: '正文',
  },
  heading1: {
    name: '标题1',
  },
  heading2: {
    name: '标题2',
  },
  heading3: {
    name: '标题3',
  },
  heading4: {
    name: '标题4',
  },
  heading5: {
    name: '标题5',
  },
  heading6: {
    name: '标题6',
  },
};

type InsertDropdownData = Record<PickSome<ElementType, 'codeBlock' | 'website'>, DropdownValue>;

export const insertDropdownData: InsertDropdownData = {
  codeBlock: {
    name: '代码块',
  },
  website: {
    name: '网站',
  },
};

export type IconsType = keyof typeof icons;

export const icons = {
  undo: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <path
        fill={iconValue ?? 'white'}
        stroke="black"
        strokeWidth="0.2"
        d="M12.9,15l1.6,2H7l1.7-7l1.6,1.9c0.9-0.8,2.9-1.8,6.3-1.8c5.3,0,7.4,5.4,7.4,5.4
    S20.9,12,17.5,12C14.9,12,13.4,14,12.9,15z"
      ></path>
    </svg>
  ),
  redo: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <path
        fill={iconValue ?? 'white'}
        stroke="black"
        strokeWidth="0.2"
        d="M16.131,15.012L14.492,17h7.5l-1.727-7l-1.58,1.916
			c-0.934-0.751-2.855-1.802-6.293-1.802c-5.348,0-7.4,5.432-7.4,5.432s3.067-3.501,6.492-3.501
			C14.047,12.044,15.541,14.018,16.131,15.012z"
      ></path>
    </svg>
  ),
  formatPainter: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(9.000000, 7.000000)">
        <path d="M6,7V6h5.5H12V1h-0.5H10V0H0v4h10V2h1v3H5v0.5V7H4v6h3V7H6z"></path>
      </g>
    </svg>
  ),
  clean: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.000000, 6.000000)">
        <path
          d="M7.8,12H4.1H3.3l-3.4-3.4l8.1-8.1l6,6L8.6,12H7.8z M8.1,11l1.4-1.4L4.9,5L1.3,8.5
				L3.8,11H8.1z M0.9,13h13v1h-13V13z"
        ></path>
      </g>
    </svg>
  ),
  bold: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(11.000000, 8.000000)">
        <path
          d="M4.08,4.65c0.615,0,1.094-0.087,1.436-0.262c0.537-0.275,0.806-0.769,0.806-1.483
				c0-0.719-0.286-1.203-0.857-1.453c-0.322-0.14-0.801-0.21-1.436-0.21h-2.6V4.65H4.08z M4.57,9.727
				c0.894,0,1.531-0.265,1.912-0.794C6.721,8.599,6.841,8.194,6.841,7.72c0-0.799-0.349-1.343-1.047-1.632
				C5.422,5.933,4.932,5.856,4.321,5.856H1.428v3.871H4.57z M0,0h4.622c1.26,0,2.156,0.384,2.688,1.153
				c0.313,0.454,0.469,0.978,0.469,1.572c0,0.694-0.193,1.263-0.579,1.707C7,4.668,6.711,4.882,6.335,5.077
				C6.887,5.292,7.3,5.534,7.573,5.803c0.483,0.479,0.725,1.141,0.725,1.984c0,0.709-0.217,1.35-0.652,1.924
				C6.997,10.571,5.964,11,4.548,11H0V0z"
        ></path>
      </g>
    </svg>
  ),
  italic: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(12.000000, 8.000000)">
        <path d="M4.773,1H6V0H2v1h1.273l-2.045,9H0v1h4v-1H2.727L4.773,1z"></path>
      </g>
    </svg>
  ),
  underline: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(12.000000, 8.000000)">
        <path
          d="M2.881,0v6.021c0,0.707,0.137,1.295,0.41,1.764
				C3.697,8.492,4.38,8.846,5.342,8.846c1.153,0,1.937-0.382,2.352-1.147c0.223-0.416,0.335-0.975,0.335-1.678V0h1.381v5.471
				c0,1.198-0.166,2.12-0.499,2.765C8.299,9.412,7.146,10,5.451,10S2.605,9.412,1.999,8.236C1.666,7.591,1.5,6.669,1.5,5.471V0
				H2.881z M0,12h11v1H0V12z"
        ></path>
      </g>
    </svg>
  ),
  strike: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(12.000000, 8.000000)">
        <path
          d="M3.158,5H0v1h6.083l0.78,0.171c0.791,0.175,1.372,0.381,1.743,0.618
				C8.973,7.03,9.156,7.435,9.156,8.003c0,0.757-0.435,1.283-1.304,1.577C7.403,9.731,6.905,9.807,6.358,9.807
				c-1.221,0-2.073-0.346-2.556-1.037C3.548,8.401,3.404,7.92,3.37,7.329H2c-0.015,1.127,0.356,2.019,1.113,2.677
				C3.871,10.669,4.918,11,6.256,11c1.147,0,2.155-0.249,3.021-0.746c0.867-0.497,1.3-1.323,1.3-2.478
				c0-0.727-0.21-1.319-0.63-1.776H13V5H7.902C7.89,4.997,7.879,4.995,7.867,4.992L6.358,4.658C5.343,4.431,4.691,4.242,4.403,4.09
				C3.963,3.854,3.744,3.48,3.744,2.968c0-0.464,0.188-0.871,0.564-1.221s0.994-0.526,1.853-0.526c1.064,0,1.819,0.272,2.263,0.817
				c0.239,0.298,0.396,0.727,0.469,1.285h1.37c0-1.16-0.394-2.004-1.183-2.532C8.291,0.264,7.332,0,6.205,0
				C4.979,0,4.032,0.301,3.363,0.902S2.359,2.272,2.359,3.21C2.359,3.974,2.625,4.571,3.158,5z"
        ></path>
      </g>
    </svg>
  ),
  color: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(7.000000, 7.000000)">
        <path
          d="M8.445,6.492l-1.633-4.86l-1.736,4.86H8.445z M6.05,0h1.648l3.904,11h-1.597
				L8.914,7.705H4.659L3.494,11H2L6.05,0z"
        ></path>
        <g fill={iconValue || 'white'} stroke="black" strokeWidth={0.2}>
          <rect y="13" width="14" height="3"></rect>
          <rect x="0.5" y="13.5" width="13" height="2"></rect>
        </g>
      </g>
    </svg>
  ),
  background: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g>
        <g transform="translate(7.000000, 7.000000)" fill={iconValue || 'white'} stroke="black" strokeWidth={0.2}>
          <rect y="13" width="14" height="3"></rect>
          <rect x="0.5" y="13.5" width="13" height="2"></rect>
        </g>
      </g>
      <path
        d="M11.817,5.976l-1.971,5.135l1.113,0.427l-0.823,2.145l1.189,0.456L9.842,18h4.357l0.922-2.401
	l1.19,0.457l0.824-2.146l1.112,0.427l1.972-5.135L11.817,5.976z M13.375,16.801h-1.787l0.856-2.23l1.557,0.598L13.375,16.801z
	 M15.622,14.505l-1.488-0.571l-2.381-0.914l0,0.001l-0.068-0.026l0.394-1.025l3.936,1.511L15.622,14.505z M17.558,12.785
	l-6.161-2.366l1.11-2.892l6.161,2.365L17.558,12.785z"
      ></path>
    </svg>
  ),
  orderedList: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M0.2,1.1V0.6c0.2,0,0.4,0,0.5,0c0.1,0,0.3-0.1,0.3-0.2c0.1-0.1,0.1-0.1,0.1-0.3
				c0-0.1,0-0.1,0-0.1h0.6v3.5H1V1.1H0.2z M0.2,6.8c0.1-0.2,0.3-0.5,0.7-0.7c0.3-0.2,0.5-0.4,0.6-0.5c0.1-0.2,0.2-0.3,0.2-0.5
				c0-0.1,0-0.3-0.1-0.4C1.5,4.6,1.4,4.6,1.3,4.6C1,4.6,0.9,4.7,0.8,4.8c0,0.1-0.1,0.2-0.1,0.4H0.1c0-0.3,0.1-0.5,0.2-0.7
				C0.4,4.2,0.7,4,1.2,4c0.4,0,0.7,0.1,0.9,0.3s0.3,0.5,0.3,0.8c0,0.3-0.1,0.5-0.2,0.7C2.1,6,1.9,6.1,1.7,6.3L1.4,6.5
				C1.2,6.6,1.1,6.7,1.1,6.7S0.9,6.9,0.9,6.9h1.5v0.6H0C0,7.3,0.1,7.1,0.2,6.8z M0.7,10.5c0,0.1,0,0.3,0.1,0.4
				C0.8,11,1,11.1,1.2,11.1c0.1,0,0.3,0,0.4-0.1s0.2-0.2,0.2-0.4c0-0.2-0.1-0.4-0.3-0.5C1.3,10,1.2,10,0.9,10V9.5
				c0.2,0,0.4,0,0.5-0.1C1.6,9.4,1.6,9.2,1.6,9c0-0.1,0-0.2-0.1-0.3S1.3,8.5,1.2,8.5C1,8.5,0.9,8.6,0.8,8.7S0.7,8.9,0.7,9.1H0.1
				c0-0.2,0-0.3,0.1-0.5c0.1-0.1,0.1-0.3,0.3-0.4C0.5,8.2,0.6,8.1,0.7,8S1,8,1.2,8C1.5,8,1.8,8.1,2,8.2s0.3,0.4,0.3,0.7
				c0,0.2-0.1,0.4-0.2,0.5C2.1,9.6,2,9.6,1.9,9.7c0.1,0,0.2,0.1,0.3,0.2c0.2,0.2,0.3,0.4,0.3,0.7c0,0.3-0.1,0.6-0.3,0.8
				s-0.5,0.3-0.9,0.3c-0.5,0-0.8-0.2-1-0.5C0.1,11,0,10.7,0,10.5H0.7z M4.9,1.5h8v1h-8V1.5z M4.9,5.5h8v1h-8V5.5z M4.9,9.5h8v1h-8
				V9.5z"
        ></path>
      </g>
    </svg>
  ),
  unorderedList: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M1,0h1c0.3,0,0.5,0.2,0.5,0.5V2H1C0.7,2,0.5,1.8,0.5,1.5v-1l0,0C0.5,0.2,0.7,0,1,0L1,0z
        M1,4h1c0.3,0,0.5,0.2,0.5,0.5V6H1C0.7,6,0.5,5.8,0.5,5.5v-1C0.5,4.2,0.7,4,1,4L1,4z M1,8h1c0.3,0,0.5,0.2,0.5,0.5V10H1
       c-0.3,0-0.5-0.2-0.5-0.5v-1C0.5,8.2,0.7,8,1,8L1,8z M4.5,1h9v1h-9V1z M4.5,5h9v1h-9V5z M4.5,9h9v1h-9V9z"
        ></path>
      </g>
    </svg>
  ),
  checkList: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M11,10.5V11H0v-0.5V0h0.5H8v1H1v9h9V5h1V10.5z M3.6,4l1.9,1.9L10.3,1h2.1l-7,7L4.9,7.4
				L1.5,4H3.6z"
        ></path>
      </g>
    </svg>
  ),
  indentRight: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M1.5,2.5l3,3l-3,3V2.5z M0.5,0h13v1h-13V0z M0.5,10h13v1h-13V10z M6.5,3h6v1h-6V3z
        M6.5,5h6v1h-6V5z M6.5,7h6v1h-6V7z"
        ></path>
      </g>
    </svg>
  ),
  indentLeft: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M4,8.7L0.8,5.5L4,2.3V8.7z M0,0h13v1H0V0z M0,10h13v1H0V10z M6,7h6v1H6V7z M6,5h6v1H6V5
				z M6,3h6v1H6V3z"
        ></path>
      </g>
    </svg>
  ),
  align: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <g transform="translate(8.130000, 7.500000)">
        <path
          d="M18,18h24v2H18V18z M18,26h24v2H18V26z M18,34h24v2H18V34z M18,22h16v2H18V22z M18,30h16
        v2H18V30z"
        ></path>
      </g>
    </svg>
  ),
  lineSpacing: (iconValue?: string) => (
    <svg viewBox="0 0 30 27">
      <path
        d="M10.5,16v-5h2L10,8l-2.5,3h2v5h-2l2.5,3l2.5-3H10.5z M14.5,9h8v1h-8V9z
        M14.5,13h8v1h-8V13z M14.5,17h8v1h-8V17z M14.5,11h8v1h-8V11z M14.5,15h8v1h-8V15z"
      ></path>
    </svg>
  ),
  dropdown: (iconValue?: string) => (
    <svg viewBox="0 0 10 27">
      <g transform="scale(0.7) translate(2, 15)">
        <polygon points="5,6 0,0 10,0"></polygon>
      </g>
    </svg>
  ),
  code: () => (
    <svg viewBox="0 0 30 27" style={{ width: '30px' }}>
      <g transform="scale(1.1) translate(5, 3)">
        <path
          d="M5.4,9.5l2.1,2.1l-0.7,0.7L4,9.5l2.8-2.8l0.7,0.7L5.4,9.5z M15.6,9.5l-2.1-2.1l0.7-0.7L17,9.5
		     l-2.8,2.8l-0.7-0.7L15.6,9.5z M8.7,14l2.4-9h1l-2.4,9H8.7z"
        />
      </g>
    </svg>
  ),
  image: () => (
    <svg viewBox="0 0 20 20" style={{ width: '30px' }}>
      <g fill="#666">
        <path
          d="M17,4v12H4V4H17z M16,5H5v5.018L7.519,7.5l4.854,5.064l2.098-2.098
		l1.53,1.53V5z M13.5,6c0.552,0,1,0.448,1,1s-0.448,1-1,1s-1-0.448-1-1S12.948,6,13.5,6z"
        />
      </g>
    </svg>
  ),
  blockQuote: () => (
    <svg viewBox="0 0 20 20">
      <g>
        <path
          d="M9.002,6v1.357c-0.557,0.209-0.946,0.517-1.16,0.923
		C7.623,8.691,7.515,9.193,7.515,9.786l0,0v0.1h1.487L9,13H6.001l0.002-3.19C5.968,8.862,6.275,7.94,6.859,7.233
		C7.42,6.569,8.178,6.134,9.002,6L9.002,6z M14.002,6v1.357c-0.557,0.209-0.946,0.517-1.16,0.923
		c-0.219,0.411-0.327,0.913-0.327,1.507l0,0v0.1h1.487L14,13h-2.999l0.002-3.19c-0.034-0.948,0.273-1.87,0.856-2.578
		C12.42,6.569,13.178,6.134,14.002,6L14.002,6z"
        ></path>
      </g>
    </svg>
  ),
  close: () => (
    <svg viewBox="0 0 16 16">
      <g>
        <path
          d="M8,7.4L12.4,3L13,3.6L8.6,8l4.4,4.4L12.4,13L8,8.6L3.6,13L3,12.4L7.4,8L3,3.6
			L3.6,3L8,7.4z"
        ></path>
      </g>
    </svg>
  ),
  link: () => (
    <svg viewBox="0 0 20 20">
      <g>
        <path
          d="M5.4,9.5l2.1,2.1l-0.7,0.7L4,9.5l2.8-2.8l0.7,0.7L5.4,9.5z M15.6,9.5l-2.1-2.1l0.7-0.7L17,9.5
		l-2.8,2.8l-0.7-0.7L15.6,9.5z M8.7,14l2.4-9h1l-2.4,9H8.7z"
        ></path>
      </g>
    </svg>
  ),
};

export const initialValue: Descendant[] = [
  {
    type: 'paragraph',
    children: [
      { text: 'This is editable ' },
      { text: 'rich', bold: true },
      { text: ' text, ' },
      { text: 'much', italic: true },
      { text: ' better than a ' },
      { text: '<textarea>', code: true },
      { text: '!' },
    ],
  },
  {
    type: 'paragraph',
    children: [
      {
        text: "Since it's rich text, you can do things like turn a selection of text ",
      },
      { text: 'bold', bold: true },
      {
        text: ', or add a semantically rendered block quote in the middle of the page, like this:',
      },
    ],
  },
  {
    type: 'block-quote',
    children: [{ text: 'A wise quote.' }],
  },
  {
    type: 'paragraph',
    children: [{ text: 'Try it out for yourself!' }],
  },
  {
    type: 'codeBlock',
    children: [
      {
        text: 'const \n',
        code: true,
      },
      {
        text: 'let',
        code: true,
      },
    ],
  },
  {
    type: 'table',
    children: [
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '' }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Human', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Dog', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Cat', bold: true }],
          },
        ],
      },
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '# of Feet', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: '2' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '4' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '4' }],
          },
        ],
      },
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '# of Lives', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: '1' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '1' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '9' }],
          },
        ],
      },
    ],
  },
  {
    type: 'paragraph',
    children: [
      {
        type: 'link',
        children: [{ text: 'http://www.baidu.com' }],
      },
    ],
  },
];
